<template>
  <tbc-dialog title="商品分类" ref="dialog" @confirm="onConfirmSelect">
    <tbc-selector api="/goods.category/async" style="width: 100%" :checkStrictly="true" @changeLabel="changeLabel"
                  @change="onSelected"/>
  </tbc-dialog>
</template>
<script lang="ts">
import {defineComponent, Ref, ref} from 'vue'

export default defineComponent({

  name: 'goods-cat-selector',

  emits: ['select'],

  setup(props, {emit}) {

    const dialog: Ref = ref(null)
    const selected = ref<string[]>([])
    let label: string[] = []
    const show = () => {
      dialog.value.show()
    }

    const changeLabel = (data: string[]) => {
      label = data
      console.log(data)
    }

    const onSelected = (data: string[]) => {
      selected.value = data
    }

    const onConfirmSelect = () => {
      const node: { cat_id: string, cat_name: string }[] = []
      selected.value.forEach((item: string, index: number) => {
        node.push({cat_id: item, cat_name: label  [index]})
      })
      emit('select', node, JSON.parse(JSON.stringify(selected.value)), JSON.parse(JSON.stringify(label)))
      dialog.value.close()
    }

    return {
      dialog,
      show,
      onSelected,
      onConfirmSelect,
      changeLabel
    }
  }


  // methods: {
  //   onCascaderChange(data) {
  //     this.value = data
  //   },
  //
  //   onConfirmSelect() {
  //     this.$emit('choice', {
  //       value: this.value,
  //       label: []
  //     })
  //   },
  //
  //   show() {
  //     this.$refs.dialog.show()
  //     this.value = []
  //   },
  //
  //   close() {
  //     this.$refs.dialog.close()
  //   }
  // }
})
</script>
